body {
  background-color: lightblue;
}
div {
  width: 300px;
  height: 200px;
  background-color: lightblue;
}
.main {
  width: 300px;
  height: 200px;
  background-color: red;
}
.main:hover {
  background-color: orange;
}
.main::after {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  background-color: violet;
}
.main.primary {
  color: orange;
}
.main .father {
  width: 80%;
  height: 200px;
  background-color: blue;
}
.main .father .son {
  width: 50%;
  height: 100px;
  background-color: green;
}
.primary {
  width: 160px;
  height: 100px / 2;
}
